<template>
  <div>
    <h1>人员名单及爱好列表</h1>
    <ul>
      <!-- <Item v-for="p in person" :key="p.id" :name="p.name" :hobby="p.hobby"/> -->

      <!-- props传值的时候 批量展开传递 -->
      <Item v-for="p in person" :key="p.id" :v-bind="p"/>
    </ul>
  </div>
</template>

<script>
import Item from './components/Item'
export default {
name:"App",
components:{
Item
},
data() {
    return {
      person: [
        { id: 1, name: "老余", hobby: ["吃", "喝", "Piao"] },
        { id: 2, name: "陈伟", hobby: ["唱", "跳", "Rap"] },
        { id: 3, name: "老李", hobby: ["打球", "看书", "写字"] },
      ],
    }
  }
}
</script>

<style>

</style>